<template>
	<div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left" onclick="javascript:history.back(-1)">
				<i class="iconfont baiColor">&#xe612;</i>
				<span class="baiColor">添加银行卡</span>
			</div>
		</div>
		<div class="center" style="padding-top: 42px;">
			<p>请绑定持卡人本人的银行卡</p>
			<form action="" method="post">
				<div class="clearfix">
					<label class="left pull-left">持卡人</label>
					<!--<input class="right pull-left"  type="text" placeholder="请输入您的姓名" name="name" value="" maxlength="4" v-model="name"/>-->
					<span v-text="name" class="spantext"></span>
				</div>
				<div class="clearfix">
					<label class="left pull-left">卡号</label>
					<input class="right pull-left" @change="banks" type="text" placeholder="请输入您银行卡号" name="numbers" v-model="numbers" value="" />
				</div>
				<div class="clearfix">
					<label class="left pull-left">身份证号</label>
					<!--<input class="right pull-left" type="text" placeholder="请输入您身份证号" name="text" v-model="card" value="" />-->
					<span v-text="card" class="spantext"></span>
				</div>
				<div class="clearfix">
					<label class="left pull-left">手机号</label> 
					<input class="right pull-left" type="number" value=""  @change="phone" v-model="tele"  placeholder="请输入您的手机号" />
				</div>
				<div class="clearfix">
					<label class="left pull-left">卡类型</label>
					<span v-text="bank" class="spantext"></span>
				</div>
				
			</form>
				<button @click="enter">确定</button>
		</div>
		
	</div>
	
</template>

<script>
	
	export default {
		data() {
			return {
				name:"",	//名字
				numbers:'',	//卡号
				tele:'',	//手机号
				card:"",	//身份证
				bank:'',	//银行卡类型
				banklogo:""	//银行卡logo
			}
		},
		mounted:function(){
			let _this = this;
			var info = window.localStorage.data;
			var params = new URLSearchParams();
			params.append('token', info);	//客户秘钥（信息）
			this.$axios({
			   url:"Home/User/bankcard_qd",
				method:"post",
				data:params
			   }).then(function(res){
			   	console.log(res.data)
			   	_this.name = res.data.data.r_name;
			   	_this.card = res.data.data.r_idno;		
			}).catch(function(err){
				console.log(err)	
			})
		},
		methods: {
			//验证手机号
			phone(){
				var _this =this;
				var testPhone = new RegExp(/^1((3[0-9]{1})|(45)|(47)|(5[0-9]{1})|(76)|(77)|(78)|(8[0-9]{1}))\d{8}$/);
				var phone = _this.tele;
				if(testPhone.test(phone) == false){
					alert("手机号输入错误，请重新输入")
					_this.tele = ""
				}
			},
			//验证银行卡长度以及是否正确
			banks(){
				var numbers = this.numbers;
				let _this = this;
				if(numbers.length<15 || numbers.length>20){
					alert("银行卡输入错误，请重新输入")
				}else{
					var info = window.localStorage.data;
					var params = new URLSearchParams();
					params.append('token', info);
					params.append('bankcard',numbers);
					this.$axios({
					   url:"Home/User/bankcard_xq",
						method:"post",
						data:params
					}).then(function(res){
					   	_this.banklogo = res.data.data.bankimage;	//银行卡图片
						_this.bank = res.data.data.bankname;	
					}).catch(function(err){
						console.log(err)		
					})
				}
			},
			//确定
			enter(){
				let numbers = this.numbers;	//	银行卡
				let tele = this.tele; //手机号
				let name = this.name	//名字
				let card = this.card	//身份证号
				let bank = this.bank;	//银行卡名称
				let banklogo = this.banklogo	//银行卡logo
				console.log(banklogo)
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				if( numbers == "" || tele == ""){
					alert("请将信息填写完整");
				}else{
					var  _this = this;
					params.append('token', info);	//客户秘钥（信息）
					params.append('bankcard',numbers);
					params.append('mobile',tele);
					params.append('r_name',name);
					params.append('r_idno',card);
					params.append('bankname',bank);
					params.append('bankimg',banklogo);
					this.$axios({
					   url:"Home/User/bankcard_add",
						method:"post",
						data:params
					  }).then((res)=>{
					   	var datas = res.data;
					   	console.log(res.data)
					   	if(datas == 1){
					   		alert("认证成功")
					   		this.$router.push("wShares");
					   		this.numbers = "";
					   		this.tele = "";
					   		this.bank = "";
					   	}else if(datas == 2){
					   		alert("认证失败")
					   	}else if(datas == 3){
					   		alert("实名认证信息不一致")
					   	}else if(datas == 0){
					   		alert("认证失败")
					   	}
					}).catch(function(err){
						console.log(err)		
					})
				}

			}
		},
	}
</script>

<style scoped="scoped">
	
	@import "../css/public.css";
	.header_left span {
		line-height: 20px;
		font-size: 18px;
	}
	.center {
		width: 95%;
		margin: 0 auto;
	}
	/*显示的信息span*/
	.spantext{
		color: #333;
		font-size: 16px;
		line-height: 42px;
	}
	.center>p {
		color: #666;
		font-size: 14px;
		padding: 6px 0 8px;
	}
	
	.center form {
		width: 100%;
		background: #FFFFFF;
	}
	
	.center form>div {
		height: 44px;
		line-height: 42px;
		border-bottom: solid 1px #F0F0F0;
	}
	
	.center form label {
		color: #333;
		font-size: 16px;
		padding-left: 10px;
	}
	
	.center form .left {
		width: 20%;
		min-width: 77px;
	}
	
	.center form .right {
		width: 65%;
	}
	.center form .sele
	{
		width: 65%;
		height: 45px;
		line-height: 45px;
		font-size:16px;
	}
	.center form .right option{
		font-size: 16px;
	}
	.center form input {
		display: block;
		height: 44px;
		line-height: 44px;
	}
	
	input[value] {
		font-size: 16px;
	}
	
	input::-webkit-input-placeholder {
		color: #999;
		font-size: 16px;
	}
	
	.center button {
		background: #F3961F;
		width: 100%;
		height: 45px;
		border-radius: 10px;
		font-size: 18px;
		color: #FCFCFC;
		margin-top: 98px;
	}
</style>